  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩查询</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <img src="./assets/index.png" alt="成绩封面" class="cover-image">
    <h4>同学，您目前的学分（成绩）为：<span id="total-credits">0</span></h4>
    <div id="grades-info"></div>
    
    <button onclick="window.location.href='index.html'">返回首页</button>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[$$]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }
    
      const studentId = getParameterByName('studentId'); // 获取学号
      const apiUrl = `https://xshx.gufe.edu.cn/webchat/chengji/list/${studentId}`;
    
      axios({
        url: apiUrl
      }).then(result => {
        const data = result.data;
        const container = document.getElementById('grades-info');
        let totalCredits = 0;
    
        data.forEach(item => {
          totalCredits += parseFloat(item.courseJidian); // 累加绩点
    
          const div = document.createElement('div');
          div.classList.add('grade-card');
          div.innerHTML = `
            <p class="title_course">课程名称: ${item.courseName}</p>
            <p>成绩: ${item.courseChengji}</p>
            <p>绩点: ${item.courseJidian}</p>
          `;
          container.appendChild(div);
    
          document.getElementById('total-credits').innerText = totalCredits.toFixed(2); // 保留两位小数
        });
      });
    </script>
  </body>
  </html>
